<template>
  <div>

    <div v-if="tryStatus">
      <count-chart type=0 :count-list="countData.learnCountList"></count-chart>
      <test-chart :count-list="countData.testCountList"></test-chart>
      <course-chart type=0 :count-list="countData.courseCountList"></course-chart>
      <cert-chart type=0 :count-list="countData.certCountList"></cert-chart>
      <level-cover :show="tryStatus"></level-cover>
    </div>
    <div v-else>
      <loading-view :data="chartData">
        <div v-if="chartData">
          <count-chart type=0 :count-list="countData.learnCountList" @sendMoreClick="countMoreClick"></count-chart>
          <test-chart :count-list="countData.testCountList"></test-chart>
          <course-chart type=0 :count-list="countData.courseCountList" @sendMoreClick="courseMoreClick"></course-chart>
          <cert-chart type=0 :count-list="countData.certCountList" @sendMoreClick="certMoreClick"></cert-chart>
        </div>
      </loading-view>
    </div>

  </div>
</template>


<script>

  import UniversityTool from '@/pages/university/UniversityTool'
  import CountChart from './components/CountChart'
  import TestChart from './components/TestChart'
  import CourseChart from './components/CourseChart'
  import CertChart from './components/CertChart'
  import LevelCover from '../components/LevelCover'
  import LoadingView from '@/components/LoadingView'
  import {Toast} from 'vant'


  export default {
    name: "chart",
    props: {
      teamId: {
        type: Number,
        default: null,
      },
      tryStatus: {
        type: Boolean,
        default: false,
      }
    },
    watch: {
      teamId: function (val) {
        Toast.loading({
          duration: 0,
          message: '加载中...',
          forbidClick: true,
        });
        this.getChartData()
      }
    },
    activated() {

    },
    data() {
      return {
        chartData: null
      }
    },
    components: {
      CountChart,
      TestChart,
      CourseChart,
      CertChart,
      LevelCover,
      LoadingView
    },
    mounted() {
      if (this.teamId) {
        this.getChartData()
      }

    },
    computed: {

      countData() {

        let learnCountList = []
        let courseCountList = []
        let certCountList = []
        let testCountList = []
        let passCount = 0
        let failCount = 0

        if (this.tryStatus) {
          //假数据
          learnCountList = [
            {"名字": "张三", "学习值": 800},
            {"名字": "李四", "学习值": 700},
            {"名字": "王五", "学习值": 500},
            {"名字": "赵六", "学习值": 300},
            {"名字": "孙七", "学习值": 200}]

          courseCountList = [
            {"名字": "张三", "课程": 800},
            {"名字": "李四", "课程": 700},
            {"名字": "王五", "课程": 500},
            {"名字": "赵六", "课程": 300},
            {"名字": "孙七", "课程": 200}]

          certCountList = [
            {"名字": "张三", "证书": 80},
            {"名字": "李四", "证书": 70},
            {"名字": "王五", "证书": 50},
            {"名字": "赵六", "证书": 30},
            {"名字": "孙七", "证书": 20}]

          passCount = 100
          failCount = 80
          testCountList = [{"结果": "通过", "次数": passCount}, {"结果": "不通过", "次数": failCount}]

          let finalData = {
            "learnCountList": learnCountList,
            "courseCountList": courseCountList,
            "testCountList": testCountList,
            "certCountList": certCountList
          }
          return finalData
        } else {
          return this.chartData
        }

      },

    },
    methods: {
      countMoreClick() {
        this.$_router.push(`/learnValueCharts/${this.teamId}/0`)
      },
      courseMoreClick() {
        this.$_router.push(`/courseCharts/${this.teamId}/0`)
      },
      certMoreClick()  {
        this.$_router.push(`/certCharts/${this.teamId}/0`)
      },
      getChartData() {
        UniversityTool.getChartUserData(this.teamId).then((chart) => {
          this.chartData = chart
        }).finally(() => {
          Toast.clear()
        })
      }

    }

  }
</script>

<style scoped>

</style>
